<div *ngIf="usbconf else usbconfig">当前USB设备管控模式为”可读可写“，无限制记录</div>
<ng-template #usbconfig>
    <ng-container card-body-head>
        <div class="body-head row mb-3">
            <div class="type-filter">
                <div class="search">
                    <div class="search-input">
                        <input type="text" class="form-control" placeholder="请输入设备别名..." [ngModel]="searchKey" #keyword (keyup.enter)="onSearchKey(keyword.value, true)" (blur)="onSearchKey(keyword.value, false)" />
                    </div>
                    <div>
                        <button class="btn btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill" (click)="startSearch()">
              <i class="flaticon-search"></i>
            </button>
                    </div>
                    <m-button-icon class="ml-5" (click)="refresh()">刷新</m-button-icon>
                </div>
            </div>
        </div>
    </ng-container>

    <m-data-table *ngIf="result$ | async as result" [data]="result.list" [result]="result">
        <ng-container mDataTableColumn header="设备别名">
            <ng-template let-alias_name="alias_name">
                <td>{{ alias_name }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="备注" width="300px">
            <ng-template let-remarks="remarks">
                <td class="ellipsis" [attr.title]="remarks">{{ remarks }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn="vendor_id" header="VendorID">
            <ng-template let-vendor_id="vendor_id">
                <td>{{ vendor_id }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn="product_id" header="ProductID">
            <ng-template let-product_id="product_id">
                <td>{{ product_id }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn="serial_number" header="SerialNumber">
            <ng-template let-serial_number="serial_number">
                <td class="ellipsis" [attr.alt]="serial_number" [attr.title]="serial_number">{{ serial_number }}</td>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn="expiry_date" header="有效期至">
            <ng-template let-expiry_date="expiry_date">
                <ng-container *ngIf="expiry_date==='2120-01-01T00:00:00Z' else elseTemplate">
                    <td>永久有效</td>
                </ng-container>
                <ng-template #elseTemplate>
                    <td>{{ expiry_date | date:'yyyy-MM-dd HH:mm' }}</td>
                </ng-template>
            </ng-template>
        </ng-container>
        <ng-container mDataTableColumn="created_at" header="添加时间">
            <ng-template let-created_at="created_at">
                <td>{{ created_at | date:'yyyy-MM-dd HH:mm' }}</td>
            </ng-template>
        </ng-container>

        <ng-container mDataTableColumn header="操作">
            <ng-template let-id="id" let-alias_name="alias_name" let-area_id="area_id" let-in_whitelist="in_whitelist">
                <td>
                    <button mat-icon-button [matMenuTriggerFor]="editMenu">
            <mat-icon>edit</mat-icon>
          </button>
                    <mat-menu #editMenu>
                        <button mat-menu-item [routerLink]="['/usb-device/whitelist', alias_name]" [queryParams]="{id: id}">查看详情</button>
                        <button mat-menu-item (click)="removeWhitelist(id)">移出白名单</button>
                    </mat-menu>
                </td>
            </ng-template>
        </ng-container>

        <m-pagination [length]="result.total" [pageSize]="result.pageSize">
        </m-pagination>

    </m-data-table>
</ng-template>